<script setup lang="ts">
import type { Command } from "#ui/types/command-palette";

const props = defineProps<{
  index: number
  item: ExamItemType
  id: string
  hasAnswer: boolean
}>();

const emits = defineEmits<{
  answerTestItem: []
}>();
const examGauge = useMyExamGaugeStore();

const examPayload = defineModel<ExamPayload>({
  default: {
    eid: 0,
    answers: [],
  },
});
const options = props.item.options.map((o, i) => {
  return {
    id: i + 1,
    label: o,
  };
}) satisfies Command[];

const selected = ref<UnpackArray<typeof options>>();

const selectedMulti = ref<typeof options>([]);

const answerValue = ref(`print('hello world')`);

const solve = computed(() => {
  let solve: string;
  if (props.item.type === "radio")
    solve = selected.value?.label ?? "";
  else if (props.item.type === "checkbox")
    solve = selectedMulti.value.map(item => item.label).join(",");
  else
    solve = answerValue.value;

  return {
    eiid: props.item.eiid,
    solve,
  };
});

// 题目类型
const typeOptions = {
  radio: "单选题",
  checkbox: "多选题",
  answer: "问答题",
};

watch(
  solve,
  (val) => {
    // console.log("isWatch", val.value);
    examPayload.value.answers[props.index] = val;
  },
  { deep: true },
);

// 回答单选题
watch(selected, (val) => {
  if (val) 
    emits("answerTestItem");
}); 
// 回答多选题
watch(selectedMulti, (val) => {
  if (val) 
    emits("answerTestItem");
});
</script>

<template>
  <div class="test-item dark:bg-slate-500 border-2" :class="hasAnswer ? 'border-green-500' : 'hover:border-blue-500'">
    <div :id="(index + 1).toString()" class="title">
      第{{ index + 1 }}题 {{ typeOptions[item.type] }}
    </div>
    <!-- <div class="p-4"> -->
    <p class="px-5 text-xl py-4">
      {{ item.title }}
    </p>

    <p class="px-5">
      {{ item.content }}
    </p>
    <!-- 题目选项  -->
    <div v-if="item.type === 'radio'">
      <ClientOnly>
        <UCommandPalette
          v-model="selected"
          nullable
          :autoselect="false"
          :placeholder="selected?.label ?? ''"
          :groups="[{ key: `${item.eiid}_${index}`, commands: options }]"
          :ui="{
            input: {
              icon: {
                base: tw`text-white`,
              },
            },
          }"
        />
        <template #fallback>
          <FallBack />
        </template>
      </ClientOnly>
    </div>
    <!-- 多选 -->
    <div v-else-if="item.type === 'checkbox'">
      <ClientOnly>
        <UCommandPalette
          v-model="selectedMulti"
          nullable
          multiple
          :autoselect="false"
          :placeholder="selectedMulti.map((item) => item.label).join(',') ?? ''"
          :groups="[{ key: `${item.eiid}_${index}`, commands: options }]"
          :fuse="{ resultLimit: 4, fuseOptions: { threshold: 0.1 } }"
          :ui="{
            input: {
              icon: {
                base: 'text-white',
              },
            },
          }"
        />
        <template #fallback>
          <FallBack />
        </template>
      </ClientOnly>
    </div>
    <!-- 问答 -->
    <div v-else class="p-5">
      <ClientOnly>
        <div class="mb-3 border rounded px-2 pb-2">
          <PlayShiki v-model="answerValue" @answer-answer="emits('answerTestItem')" />
        </div>
        <template #fallback>
          <FallBack />
        </template>
      </ClientOnly>
    </div>
    <br>
  </div>
</template>

<style scoped lang="postcss">
.select-item svg {
  @apply !hidden;
}

.test-item {
  @apply shadow rounded mb-5;
}

.test-item .title {
  @apply bg-gray-100 p-4 border-b text-sm;
}

.test-item .tip {
  @apply text-xs mb-3 text-gray-500;
}

.test-item .option {
  @apply flex border p-2 rounded text-sm mb-2 cursor-pointer transition-all duration-200;
}

.test-item .active {
  @apply !border-blue-500 !bg-blue-50 text-blue-600;
}
</style>
